<template>
    <view class="container">
        <view class="feedback-header">
            <text class="title">意见反馈</text>
            <text class="subtitle">您的建议是我们进步的动力</text>
        </view>

        <view class="feedback-form">
            <view class="form-item">
                <text class="form-label">反馈类型</text>
                <picker 
                    mode="selector" 
                    :range="feedbackTypes" 
                    @change="onTypeChange"
                >
                    <view class="picker-value">
                        {{ selectedType || '请选择反馈类型' }}
                    </view>
                </picker>
            </view>

            <view class="form-item">
                <text class="form-label">反馈内容</text>
                <textarea 
                    class="feedback-content" 
                    v-model="content"
                    placeholder="请详细描述您的问题或建议..."
                    maxlength="500"
                ></textarea>
                <text class="word-count">{{ content.length }}/500</text>
            </view>

            <view class="form-item">
                <text class="form-label">上传截图（选填）</text>
                <view class="upload-container">
                    <view 
                        v-for="(image, index) in uploadedImages" 
                        :key="index" 
                        class="image-preview"
                    >
                        <image :src="image" mode="aspectFill"></image>
                        <text class="delete-icon" @click="deleteImage(index)">×</text>
                    </view>
                    <view 
                        v-if="uploadedImages.length < 3" 
                        class="upload-btn"
                        @click="chooseImage"
                    >
                        <text>+</text>
                    </view>
                </view>
            </view>

            <view class="form-item">
                <text class="form-label">联系方式（选填）</text>
                <input 
                    class="contact-input" 
                    v-model="contact"
                    placeholder="请留下您的联系方式，以便我们回复"
                />
            </view>

            <button 
                class="submit-btn" 
                @tap="submitFeedback"
                :loading="isSubmitting"
                :disabled="!isFormValid"
            >
                提交反馈
            </button>
        </view>
    </view>
</template>

<script>
import feedbackApi from '@/api/feedback';
import uploadApi from '@/api/upload';

export default {
    data() {
        return {
            feedbackTypes: ['功能建议', '体验问题', '内容相关', '其他问题'],
            selectedType: '',
            content: '',
            contact: '',
            uploadedImages: [],
            isSubmitting: false
        }
    },
    computed: {
        isFormValid() {
            return this.selectedType && this.content.trim().length > 0;
        }
    },
    methods: {
        onTypeChange(e) {
            this.selectedType = this.feedbackTypes[e.detail.value];
        },
        chooseImage() {
            uni.chooseImage({
                count: 3 - this.uploadedImages.length,
                sourceType: ['album', 'camera'],
                success: async (res) => {
                    try {
                        // 上传图片并获取线上地址
                        const uploadPromises = res.tempFilePaths.map(filePath => 
                            uploadApi.uploadImage(filePath)
                        );
                        const uploadedUrls = await Promise.all(uploadPromises);
                        this.uploadedImages = [...this.uploadedImages, ...uploadedUrls];
                    } catch (error) {
                        uni.showToast({
                            title: '图片上传失败',
                            icon: 'none'
                        });
                    }
                }
            });
        },
        deleteImage(index) {
            this.uploadedImages.splice(index, 1);
        },
        async submitFeedback() {
            if (!this.isFormValid) return;
            
            this.isSubmitting = true;
            
            try {
                await feedbackApi.submitFeedback({
                    type: this.selectedType,
                    content: this.content,
                    contact: this.contact,
                    images: this.uploadedImages.join(',')
                });
                
                uni.showToast({
                    title: '反馈提交成功',
                    icon: 'success'
                });
                
                setTimeout(() => {
                    uni.navigateBack();
                }, 1500);
            } catch (error) {
                uni.showToast({
                    title: '提交失败，请重试',
                    icon: 'none'
                });
            } finally {
                this.isSubmitting = false;
            }
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #F8F8F8;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.feedback-header {
    text-align: center;
    padding: 24px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.title {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.subtitle {
    display: block;
    color: #666;
    font-size: 14px;
}

.feedback-form {
    flex-grow: 1;
    padding: 24px;
    overflow-y: auto;
}

.form-item {
    margin-bottom: 24px;
    background-color: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.form-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.picker-value {
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.feedback-content {
    width: 100%;
    height: 300px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.word-count {
    font-size: 24px;
    color: #999;
    text-align: right;
    margin-top: 10px;
    display: block;
}

.upload-container {
    display: flex;
    flex-wrap: wrap;
}

.image-preview {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 10px;
}

.image-preview image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.delete-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    line-height: 40px;
    border-radius: 0 8px 0 8px;
}

.upload-btn {
    width: 200px;
    height: 200px;
    margin: 10px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: #999;
    border-radius: 8px;
}

.contact-input {
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.submit-btn {
    width: 100%;
    background-color: #1AAD19;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 32px;
    font-size: 16px;
}

.submit-btn:disabled {
    background-color: #cccccc;
}
</style> 